<template>
  <span class="header_box" flex="dir:left">
    <img flex-box="0" src="@/assets/img/header/platform_icon.png" alt="" />
    <span flex-box="0" class="platform_word">政府投资立项评审监管平台</span>
    <breadcrumb flex-box="0"></breadcrumb>
    <div class="welcome_word" flex-box="1">欢迎进入智慧立项评审监管平台</div>
    <span class="face_box" flex-box="0">
      <img src="@/assets/img/header/face_icon.png" alt="" />

      <el-dropdown>
        <span class="face_word el-dropdown-link">
          评审中心
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="showPasswordLayer">
              修改密码
            </el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </span>
</template>
<script>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import breadcrumb from './breadcrumb.vue';

export default {
  components: {
    breadcrumb,
  },
  setup() {
    const showPasswordLayer = [];
    const store = useStore();
    const router = useRouter();
    const loginOut = () => {
      store.dispatch('login/loginOut').then(() => {
        router.push({ name: 'Login' });
        ElMessage({
          message: '用户注销成功',
          type: 'success',
          duration: 2 * 1000,
        });
      });
    };
    return {
      showPasswordLayer,
      loginOut,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>